<template>
  <div class="bottomNav">
    <van-tabbar
      v-model="active"
      :fixed="true"
      active-color="#2e2e2e"
      :route="true"
      :placeholder="true"
      inactive-color="#e8e8e8"
    >
      <van-tabbar-item icon="send-gift" :to="{ name: 'bookshelf' }"
        >书架</van-tabbar-item
      >
      <van-tabbar-item icon="shop" :to="{ name: 'bookshop' }"
        >书城</van-tabbar-item
      >
      <van-tabbar-item icon="apps-o" :to="{ name: 'classify' }"
        >分类</van-tabbar-item
      >
      <van-tabbar-item icon="friends" :to="{ name: 'my' }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="less" scoped>
.bottomNav {
  border-top: 1px solid #eeeeee;
}
</style>